<!--
	作者：956911785@qq.com
	时间：2018-10-18
	描述：教师-添加
-->

<template>
	<Modal :title="title" v-model="modal0" width="800px">
		<Form ref="params" :model="params" :rules="ruleValidate" :label-width="100" label-position="left">
			<div style="width:100%;height: 400px; overflow-y: scroll;">
		        <div style="width:100%;height: 60px;line-height: 60px;float:left;">
		        	<div style="width: 100%;text-align: left;float: left;" align="left">
				        <FormItem  prop="tname" label="教师姓名">
				        	<Input v-model="params.tname" placeholder="请输入教师姓名" clearable style="width: 90%"></Input>
		        		</FormItem>
		        	</div>
		        </div>
		       
		       <div style="width:100%;height: auto;overflow: hidden;float:left;">
			       	<div style="float:left;">
					    <FormItem label="教师头像">
						    <Upload
						        ref="upload"
						        :show-upload-list="false"
						        :on-success="handleSuccess"
						        :format="['jpg','jpeg','png']"
						        :max-size="2048"
						        :on-format-error="handleFormatError"
						        :on-exceeded-size="handleMaxSize"
						        
						        type="drag"
						        action="/stgl/filesUpload.html"
						        style="display: inline-block;width:80px;">
						        <div style="width: 80px;height:80px;line-height: 80px;">
						            <Icon type="ios-camera" size="20"></Icon>
						        </div>
						    </Upload>
					    </FormItem>
				    </div>
				   
				    <div class="demo-upload-list" >
				        <template v-if="photos.status === 'finished'">
				            <img :src="imgurl">
				            <div class="demo-upload-list-cover">
				                <Icon type="ios-eye-outline" @click.native="handleView()"></Icon>
				                <Icon type="ios-trash-outline" @click.native="handleRemove(photos)"></Icon>
				            </div>
				        </template>
				        <template v-else>
				            <Progress v-if="photos.showProgress" :percent="photos.percentage" hide-info></Progress>
				        </template>
				    </div>
				    <Modal title="View Image" v-model="visible">
				        <img :src="imgurl" v-if="visible" style="width: 100%">
				    </Modal>
			    </div> 
			    
		        <div style="width:100%;height: auto;float:left;">
		        	<FormItem  prop="jianjie" label="教师简介">
			        	<Input v-model.trim="params.jianjie" type="textarea" :rows="10" style="width: 86.5%;" placeholder="请输入教师简介！" />
        			</FormItem>
		        </div>
		        
		   </div> 
	    </Form>
	   	<div slot="footer">
	    	<Button type="text"  @click="closeModal()">取消</Button>
	    	<Button type="primary" @click="addsave()" >确定</Button>
	    </div>
     </Modal>
</template>

<script>
	import _config from "../../../../../config/config"
	export default {
		name:"addteacher",
		props: {
    		teas:{
    			type:Object,	
    			default: function() {
					return null
				}
    		},
    		title:{
    			type:String,	
    		},
    	},
		data() {
			//长度控制
			const lenPass = (rule, str, callback) => {
			  if(str.length>rule.length){
			  	 callback(new Error('字符串长度在1-'+rule.length+'之间！'));
			  }
			  return callback();
			};
			return {
				ruleValidate: {
		            tname: [
		                {required: true, message: '请输入教师姓名！', trigger: 'blur'},
		                {length:50,validator:lenPass,trigger:'blur'}
		            ],
		            jianjie: [
		                {required: true, message: '请输入教师简介！', trigger: 'blur'},
		                {length:1000,validator:lenPass,trigger:'blur'}
		            ]
		           
		       },   
                imgurl: '',
                visible: false,
                photos: {},
                modal0:false,
                params:{
                	tname:'',
					jianjie:'',
					photo:''
                }
			}
		},
		components: {
		},
		methods: {
			addsave:function(){
				if(this.imgurl==""){
					this.params.photo="";
				}
				this.$refs.params.validate((valid) => {
					if (valid){
						const params={...this.params};
						this.$emit("addsave",params);
                    }
               })
	        }, 
			
			handleView () {
                this.visible = true;
            },
            handleRemove (file) {
                const fileList = this.$refs.upload.fileList;
                this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
                const photos={
                	status:'',
                	showProgress:"",
                	percentage:0
                }
                this.photos=photos;
            },
            handleSuccess (res, file) {
              	const files=this.$refs.upload.fileList;
                const photos={
                	status:'finished',
                	showProgress:files[0].showProgress,
                	percentage:files[0].percentage
                }
                this.imgurl=_config._ADMIN_SERVER+"/stgl/"+res[0].FILE_PATH;
                this.photos=photos;
                file.url = res[0].FILE_PATH;
                file.name =res[0].FILE_NAME;
                this.params.photo=res[0].FILE_PATH;
            },
            handleFormatError (file) {
                this.$Notice.warning({
                    title: '文件上传失败',
                    desc: '文件' + file.name + '无法上传, 上传文件请选择jpg or png.'
                });
            },
            handleMaxSize (file) {
                this.$Notice.warning({
                    title: '提示',
                    desc: '文件  ' + file.name + ' 太大, 上传的文件不能超过2M.'
                });
            },
            
            closeModal(){
	      	    this.modal0 = false;
	      	    this.resetpar();
	      	    this.$emit("closeModal");
	        },
	        resetpar(){
	        	this.params={
	        		tname:'',
					jianjie:'',
					photo:''
				};
	        	this.photos={};
	        	this.imgurl="";
	        },
	        
		},
		mounted() {

		},
		watch:{
			teas(news,olds){
				if(news.photo){
					const photos={
	                	status:'finished',
	                	showProgress:"",
	                	percentage:0
	                }
	                this.imgurl=_config._ADMIN_SERVER+"/stgl/"+news.photo;
	                this.photos=photos;
				}else{
					this.photos={};
	        		this.imgurl="";
				}
				this.params=news;
			},
			modal0(news,olds){
				if(!news){
					 this.resetpar();
				}
			}
		},
		computed: {
			
		}
		
	}
</script>

<style scoped="scoped">
	 .demo-upload-list{
        display: inline-block;
        width: 100px;
        height: auto;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0px;
        margin-right: 4px;
        float:left;
        margin-left: 4px;
    }
    .demo-upload-list img{
        width: 100%;
        height: 100%;
    }
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .demo-upload-list:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
</style>



